<template>
  <div class="e-charts">
    <div class="charts_1">
      <div id="charts_1">
      </div>
      <div>charts_1</div>
    </div>
    <div class="charts_2">
      <div id="charts_2">
      </div>
      <div>charts_2</div>
    </div>
    <div class="charts_3">
      <div id="charts_3">
      </div>
      <div>charts_3</div>
    </div>
  </div>
</template>
<script>
  import * as echarts from 'echarts'
  import 'echarts-liquidfill'
  export default {
    data() {
      return {
        flag: true,
        data_1: [{
          'name': '1月',
          'value': 80
        }, {
          'name': '2月',
          'value': 87.8
        }, {
          'name': '3月',
          'value': 71
        }, {
          'name': '4月',
          'value': 80
        }, {
          'name': '5月',
          'value': 86
        }, {
          'name': '6月',
          'value': 66
        }],
        data_2: [{
          'name': '7月',
          'value': 81
        }, {
          'name': '8月',
          'value': 76
        }, {
          'name': '9月',
          'value': 90
        }, {
          'name': '10月',
          'value': 86
        }, {
          'name': '11月',
          'value': 89
        }, {
          'name': '12月',
          'value': 80
        }]
      }
    },
    props: {
      chartsShow: {
        type: Boolean,
        default: false
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        console.log(echarts)
        this.myChart_1 = echarts.init(document.getElementById('charts_1'))
        this.myChart_2 = echarts.init(document.getElementById('charts_2'))
        this.myChart_3 = echarts.init(document.getElementById('charts_3'))
        this.addOption_1()
        this.addOption_3()
      },
      addOption_1() {
        const option_1 = {
          series: [{
            type: 'liquidFill',
            data: [0.98, 0.8, 0.6, 0.3],
            radius: '60%' //
          }]
        }
        this.myChart_1.setOption(option_1)
      },
      addOption_2(data) {
        const xData = []
        const yData = []
        const min = 50
        data.map(function (a, b) {
          xData.push(a.name)
          if (a.value === 0) {
            yData.push(a.value + min)
          } else {
            yData.push(a.value)
          }
        })
        const option = {
          // backgroundColor: 'rgba(0, 0, 0, 0.3)',
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',
              lineStyle: {
                opacity: 0
              }
            },
            formatter: (prams) => {
              if (prams[0].data === min) {
                return '核实率：0%'
              } else {
                return '核实率：' + prams[0].data + '%'
              }
            }
          },
          legend: {
            data: ['直接访问', '背景'],
            show: false
          },
          grid: {
            left: '0%',
            right: '0%',
            bottom: '5%',
            top: '7%',
            height: '85%',
            containLabel: true,
            z: 22
          },
          xAxis: [{
            type: 'category',
            gridIndex: 0,
            data: xData,
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
                color: '#0c3b71'
              }
            },
            axisLabel: {
              show: true,
              color: 'rgb(170,170,170)',
              fontSize: 16
            }
          }],
          yAxis: [{
            type: 'value',
            gridIndex: 0,
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            min: min,
            max: 100,
            axisLine: {
              lineStyle: {
                color: '#0c3b71'
              }
            },
            axisLabel: {
              color: 'rgb(170,170,170)',
              formatter: '{value} %'
            }
          },
          {
            type: 'value',
            gridIndex: 0,
            min: min,
            max: 100,
            splitNumber: 12,
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
              }
            }
          }],
          series: [{
            name: '合格率',
            type: 'bar',
            barWidth: '30%',
            xAxisIndex: 0,
            yAxisIndex: 0,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1, [{
                    offset: 0,
                    color: '#00feff'
                  },
                  {
                    offset: 0.5,
                    color: '#027eff'
                  },
                  {
                    offset: 1,
                    color: '#0286ff'
                  }]
                )
              }
            },
            data: yData,
            zlevel: 11

          },
          {
            name: '背景',
            type: 'bar',
            barWidth: '50%',
            xAxisIndex: 0,
            yAxisIndex: 1,
            barGap: '-135%',
            data: [100, 100, 100, 100, 100, 100, 100],
            itemStyle: {
              normal: {
                color: 'rgba(255,255,255,0.1)'
              }
            },
            zlevel: 9
          }]
        }
        this.myChart_2.setOption(option)
      },
      addOption_3() {
        var streetData = [
          { name: '龙岗街道', value: 175 },
          { name: '龙城街道', value: 80 },
          { name: '坂田街道', value: 91 },
          { name: '宝龙街道', value: 105 },
          { name: '布吉街道', value: 105 },
          { name: '横岗街道', value: 37 },
          { name: '吉华街道', value: 113 },
          { name: '南湾街道', value: 364 },
          { name: '平湖街道', value: 96 },
          { name: '坪地街道', value: 108 },
          { name: '园山街道', value: 101 }
        ]
        this.street = {
          length: streetData.length,
          index: 0
        }
        this.myChart_3.on('mouseout', (params) => {
          this.panUpData()
        })
        this.myChart_3.on('mouseover', (params) => {
          clearTimeout(this.time)
          this.myChart_3.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: this.street.index
          })
        })
        this.myChart_3.on('legendselected', (params) => {
          console.log(params)
        })
        var option = {
          title: {
            text: '',
            subtext: '',
            x: 'center',
            textStyle: {
              color: '#93ccf5'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            selectedMode: false,
            orient: 'vertical',
            x: 'left',
            textStyle: { // 图例文字的样式
              color: '#ccc'
              // fontSize: 16
            },
            data: [streetData[0].name, streetData[1].name, streetData[2].name, streetData[3].name, streetData[4].name, streetData[5].name, streetData[6].name, streetData[7].name, streetData[8].name, streetData[9].name, streetData[10].name]
          },
          series: [
          {
            name: '',
            type: 'pie',
            radius: '70%',
            center: ['50%', '47%'],
            data: streetData,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            }
          }],
          color: ['#fa4f31', '#ffa72b', '#5bb834', '#06f0a9', '#5a9c38', '#0195c5', '#35a7ff', '#866eff', '#9d3124', '#c98b24', '#fe7d15']
        }
        this.myChart_3.setOption(option, true)
        // this.panUpData()
      },
      panUpData() {
        this.time = setTimeout(() => {
          // console.log(1)
          this.myChart_3.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: this.street.index
          })
          if (this.street.index > this.street.length - 2) {
            this.street.index = 0
          } else {
            this.street.index += 1
          }
          this.myChart_3.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: this.street.index
          })
          this.myChart_3.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: this.street.index
          })
          this.panUpData()
        }, 2000)
      },
      chartsUpDate() {
        if (this.flag) {
          this.addOption_2(this.data_1)
          this.flag = false
        } else {
          this.addOption_2(this.data_2)
          this.flag = true
        }
        this.time_1 = setTimeout(this.chartsUpDate, 2000)
      }
    },
    watch: {
      chartsShow(newVal, oldVal) {
        if (newVal) {
          if (this.time_1 && this.time) {
            clearTimeout(this.time_1)
            clearTimeout(this.time)
          }
          this.chartsUpDate()
          this.panUpData()
        } else {
          if (this.time_1 && this.time) {
            clearTimeout(this.time_1)
            clearTimeout(this.time)
          }
        }
      }
    }
  }
</script>
<style lang="less">
  .e-charts {
    position: relative;
    z-index: 99;

    .charts_1 {
      position: absolute;
      top: 100px;
      left: 20px;
      color: #ffffff;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 4px;
      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.26);

      #charts_1 {
        width: 300px;
        height: 300px;
      }
    }

    .charts_2 {
      position: absolute;
      top: 100px;
      right: 20px;
      color: #ffffff;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 4px;
      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.26);

      #charts_2 {
        width: 400px;
        height: 300px;
      }
    }

    .charts_3 {
      position: absolute;
      top: 460px;
      right: 20px;
      width: 400px;
      height: 300px;
      color: #ffffff;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 4px;
      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.26);

      #charts_3 {
        width: 400px;
        height: 300px;
      }
    }
  }
</style>